<template>
  <el-row class="tac">
    <el-col >
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :router="false"
      >
        <!-- 标题 -->
        <div class="containerdiv">
          <img src="../assets/哈士奇.svg" alt="Your Image" class="image">
        </div>

        <!-- 菜单 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Share /></el-icon>
            <span>API管理</span>
          </template>
          <el-menu-item @click="$emit('showLogAdrList')">地址列表</el-menu-item>
          <el-menu-item @click="$emit('showGeneratedHistorySql')">生成历史Sql</el-menu-item>
          <el-menu-item @click="$emit('showHistorySql')">历史Sql查询</el-menu-item>
          <el-sub-menu index="1-4">
            <template #title>mybatis-plus</template>
            <el-menu-item index="1-4-1" @click="$emit('generator')">代码生成</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
        <el-sub-menu index="5">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item @click="$emit('showUserList')">
            <span>用户列表</span>
          </el-menu-item>
          <!-- 其他菜单项保持原样 -->
          <el-menu-item index="/user/displayuser">个人信息</el-menu-item>
          <el-menu-item index="/user/editpassword">修改密码</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Share,
  UserFilled,
  Setting,
} from '@element-plus/icons-vue'
import {ref, defineProps} from 'vue'

type Props = {
  isCollapse: boolean
}
defineProps<Props>()

</script>

<style scoped>
.el-menu-vertical-demo {
  height: 100vh;
}
.el-menu-item {
  min-width: 0;
}
.containerdiv {
  /* 你可以设置容器的样式，例如宽度、高度、背景色等 */
  /* width: 300px; /* 示例宽度 */
  height: 48px;

  padding: 10px; /* 内边距 */
  border-bottom: 2px solid; /* 设置下边框宽度和样式 */
  border-bottom-color: #F5F5F5; /* 设置下边框颜色为红色 */
}

.image {
  overflow: auto; /* 清除浮动影响 */
  vertical-align: middle; /* 图片与文字垂直居中对齐 */
  margin-right: 6px; /* 图片右边距，可选 */
  width: 50px;
  margin-left: 50px;
}

.text {
  display: inline-block;
  vertical-align: middle; /* 文字与图片垂直居中对齐 */
  font-weight: bold; /* 加粗文字 */
  font-size: 14px;
}
</style>
